<template>
	<view>
		<view class="table-list">
			<view class="tr u-border-bottom">
				<view class="th"><text>{{head[0]}}</text></view>
				<view class="th"><text>{{head[1]}}</text></view>
				<view class="th u-text-center" v-if="!noPrice"><text>{{head[2]}}</text></view>
				<view class="th u-text-right"><text>{{head[3]}}</text></view>
				<view class="th u-text-right" v-if="!noPrice"><text>{{head[4]}}</text></view>
				<view class="th u-text-right" v-if="edit"><text>{{head[5]}}</text></view>
			</view>

			<view v-for="(cell,i) in tableDetails" :key="i">
				<view 
				class="tr"
				:class="i == tableDetails.length - 1?'last':'u-border-bottom'"
				@click="tableClick(cell)"
				>
					<view class="td" v-if="head[0]">
						<view class="u-flex">
							<view>
								<view><text>{{cell.typenames}}</text></view>
							</view>
						</view>
					</view>
					<view class="td" v-if="head[1]">
						<text class="u-font-bold">{{cell.name}}</text>
					</view>
					<view class="td u-text-center" v-if="!noPrice && head[2]">
						<text class="u-font-bold">{{cell.price}}</text>
						<text class="u-font-24">元/{{cell.isweighing==false?'件':'KG'}}</text>
					</view>
					<view class="td u-text-right" v-if="head[3]">
						<view v-if="cell.weight >= 0">
							<text class="u-font-bold">{{cell.weight}}</text>
							<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
						</view>
						<template>
							<!-- 应入库 -->
							<view v-if="cell.originalweight >= 0">
								<text class="u-font-bold"><text class="tips-txt">应入:</text>{{cell.originalweight}}</text>
								<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
							</view>
							<!-- 实际入库 -->
							<view v-if="cell.approvedweight >= 0">
								<text class="u-font-bold"><text class="tips-txt">实入:</text>{{cell.approvedweight}}</text>
								<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
							</view>
							<!-- 差额 -->
							<view v-if="cell.diff">
								<text class="u-font-bold"><text class="tips-txt">差额:</text>{{cell.diff}}</text>
								<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
							</view>
						</template>
						<!-- <template v-if="cell.originalweight == cell.approvedweight && cell.approvedweight">
							<text class="u-font-bold">{{cell.approvedweight}}</text>
							<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
						</template> -->
						<!-- <view>
							<view>
								<text><text class="tag">应</text>{{cell.originalweight}}</text>
								<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
							</view>
							<view>
								<text><text class="tag">实</text>{{cell.approvedweight}}</text>
								<text class="u-font-24">{{cell.isweighing==false?'件':'KG'}}</text>
							</view>
						</view> -->
					</view>
					<view class="td u-text-right" v-if="!noPrice && head[4]">
						<text class="u-font-bold">{{cell.amount}}</text>
						<text class="u-font-24">元</text>
					</view>
					<view class="td u-text-right" v-if="edit && head[5]">
						<text class="links" @click="editWeightData(cell)">调整</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 修改数据 -->
		<u-modal v-model="editData.show" :show-cancel-button="true" :negative-top="200" :title="editData.title" @confirm="confirmEditData"
			@cancel="editData.show = false">
			<view class="slot-content">
				<view class="u-p-0">
					<u-form label-width="200">
						<u-form-item label="调整重量" v-if="editData.type == 1">
							<view class="u-flex">
								<u-input v-model="editData.num" placeholder="填写重量" class="u-flex-1" :focus="editData.focus" type="number" inputmode="decimal" :clearable="true"/>
								<text class="u-p-l-10 u-p-r-10">KG</text>
								<u-button type="error" @click="del" size="mini">删除</u-button>
							</view>
						</u-form-item>
						<u-form-item label="调整数量" v-if="editData.type == 2">
							<u-input v-model="editData.num" placeholder="填写数量" :focus="editData.focus" type="number" inputmode="decimal" :clearable="true"/>
							<text class="u-p-l-10">件</text>
							<u-button type="error" @click="del" size="mini">删除</u-button>
						</u-form-item>
						<!-- <u-form-item :border-bottom="false">
							<view>
								<view class="u-flex u-p-t-20" style="line-height: 1em;align-items: center;">
									<u-icon name="error-circle" class="u-tips-color" size="32"></u-icon>
									<text class="u-font-24 u-tips-color u-p-l-4">提示文字</text>
								</view>
							</view>
						</u-form-item> -->
					</u-form>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name:"goods-table",
		props:{
			details:{
				type: Array,
				default: ()=>{
					return []
				}
			},
			head:{
				type: Array,
				default: ()=>{
					return ['类型','可回收物','单价','总量','总价','操作']
				}
			},
			noPrice: { //表示是否需要设置价格，用于入库等不需要设置价格得到环节
				type: Boolean,
				default: () => {
					return false
				}
			},
			edit: { //表示是否可以修改
				type: Boolean,
				default: () => {
					return false
				}
			},
		},
		data() {
			return {
				tableDetails: [],
				// 修改信息
				editData:{
					show: false,
					title: "",
					type: 0,
					num: "",
					focus: false
				},
				editObj:{}
			};
		},
		watch: {
			details(val){
				this.tableDetails = val
			}
		},
		mounted() {
			console.log('goods-table:details',this.details)
			this.tableDetails = this.details
		},
		methods:{
			// 修改重量（件数）
			editWeightData(cell){
				this.editObj = cell
				if(cell.isweighing == true){
					this.editData.title = '调整重量'
					this.editData.type = 1
				}else{
					this.editData.title = '调整件数'
					this.editData.type = 2
				}
				this.editData.num = cell.weight
				this.editData.show = true
				this.editData.focus = true
			},
			// 确认修改重量（件数）
			confirmEditData(){
				this.editObj.weight = this.editData.num
				this.editData.show = false
			},
			del(){
				this.tableDetails = this.tableDetails.filter((item)=>item.id != this.editObj.id)
				this.editData.show = false
				this.$emit('confirm',this.tableDetails)
			},
			tableClick(cell){
				this.$emit('tableClick',cell)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-list{
		background-color: #fff;
		// padding: 0 20rpx;
		.tr{
			display: flex;
			align-items: center;
			&:active{
				opacity: 0.6;
			}
			.th{
				flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
	}
	.slot-content{
		padding: 30rpx;
	}
	.tag{
		background-color: $u-color-blue;
		color: #fff;
		border-radius: 4rpx;
	}
	.last{
		border-width: 0;
	}
</style>